import { defineComponent, ref, reactive, onMounted, onUnmounted } from "vue";
import TablePage from "@/components/TablePage/TablePage";
import { tablesInterface } from "@/common/interface/table.interface";
import SiteUserService from "./index.service";
import to from "await-to-js";
import { message, Modal } from "ant-design-vue";
import styles from "./index.module.less";
import userTypeDict from "@/common/dicts/userType";
import { UserOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  name: "SiteUserList",
  setup() {
    const tablePageRef = ref(null as any);
    const siteUserService = new SiteUserService();
    // 表格定义
    const tables = reactive({
      list: [
        {
          title: "前台用户管理",
          rowKey: "userId",
          columns: [
            {
              title: "ID",
              dataIndex: "userId",
              align: "center",
              width: "80px",
            },
            {
              title: "用户头像",
              dataIndex: "avatar",
              align: "center",
              width: "100px",
            },
            {
              title: "用户账号",
              dataIndex: "userName",
              align: "center",
              width: "280px",
            },
            {
              title: "手机号码",
              dataIndex: "phonenumber",
              align: "center",
              width: "220px",
            },
            {
              title: "用户昵称",
              dataIndex: "nickName",
              align: "center",
              width: "280px",
            },
            {
              title: "用户类型",
              dataIndex: "userType",
              align: "center",
              width: "220px",
            },
            {
              title: "最近登录时间",
              dataIndex: "loginDate",
              align: "center",
              width: "240px",
            },
            {
              title: "创建时间",
              dataIndex: "createTime",
              align: "center",
              width: "240px",
            },
          ],
          toolbar: {
            left: ["refresh"],
            right: ["filter", "search"],
          },
          searchForm: {
            userName: {
              type: "input",
              label: "用户账号",
              attrs: { placeholder: "用户账号", allowClear: true },
            },
            phonenumber: {
              type: "input",
              label: "手机号码",
              attrs: { placeholder: "手机号码", allowClear: true },
            },
            userType: {
              type: "select",
              label: "用户类型",
              attrs: { placeholder: "用户类型", allowClear: true },
              datas: userTypeDict,
            },
          },
          service: siteUserService,
          operation: ({ record }) => [
            {
              type: "edit",
              color: record.userType === 0 ? "success" : "danger",
              text: record.userType === 0 ? "赋予审核权限" : "取消审核权限",
              permissions: "music:song:edit",
              clickHandler: async () => {
                Modal.confirm({
                  title: "提示",
                  content: "确认变更用户类型?",
                  onOk: async () => {
                    const [err, res] = await to(siteUserService.changeUserType({ userId: record.userId, userType: record.userType === 0 ? 1 : 0 }));
                    if (!err) {
                      message.success("变更成功!");
                      tablePageRef.value.reload();
                    }
                  }
                })
              }
            },
          ],
          bodyCell: ({ text, record, index, column }) => {
            if (column.dataIndex === "userType") {
              return <span>{userTypeDict?.[text]?.label || userTypeDict[0].label}</span>
            }
            if (column.dataIndex === 'avatar') {
              return <a-avatar size={40} icon={<UserOutlined />} src={record.avatar} />
            }
          },
          pagination: true,
          tableSourceFormat: {
            data: 'rows',
            pageSize: 'pageSize',
            current: 'pageNum',
          },
        }
      ],
    } as tablesInterface)
    // 配置项
    const config = reactive({
      table: tables.list[0],
    })
    return () => (
      <TablePage ref={tablePageRef} config={config} />
    )
  }
})